<template>
  <div class="box">
     
    <el-carousel  indicator-position="outside" height="200px" interval="6000">
        <el-carousel-item style="border-radius: 15px;" v-for="item in slidershow" :key="item">
          <router-link :to="item.routerHref">
            <img width="100%" height="100%" :src="item.imageSrc" alt="">
          </router-link>
        </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data(){
    return{
      slidershow:[{
        imageSrc:null,
        routerHref:null,
      }]
      
    }
  },
  created(){
    this.$http.get("/getsildershow").then(va=>{
      if(va.data.code==200){
        this.slidershow=va.data.data
      }
    })
  }
}
</script>

<style scoped lang="less">
    .box{
      padding:45px;
        width: 60%;
        height: 300px;
        margin: 0 auto;
        margin-top: 20px;
        // background: red;
        background: #fff;
        border: 1px solid #e0e0e0;
    }
    
      @media  screen and (max-width: 500px) {
    .box{
      width: 100%;
    }
  }
</style>